<template>
    <div class="carSelect">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">车型选择</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <car-header></car-header>
        <div class="car-content">
            <group>
                <cell :border-intent='false' class="car-insure-list">
                    <span class="car__list--title" slot="after-title">
                        <img slot="icon" src="~assets/car/car_type.png" class="go-back car-list-img">
                        <span style="color: #fff;" class="car__iconspan--title">选择车型</span>
                    </span>
                </cell>
                <div v-for="(car,index) in showCarInfo" :key="index">
                    <cell class="car-cell" :arrow-direction="car.isShowCarDetai ? 'up' : 'down'" :border-intent='false' @click.native="setSelect(index)" :style="getCarStyle(index)" primary="content" is-link>
                        <!-- <span slot="title">title</span> -->
                        <!-- <span slot="inline-desc">{{car.modelName}}</span> -->
                        <!-- <div slot="after-title" class="car-info-size">姓名</div> -->
                        <img v-show="seleId!=index" slot="after-title" style="width: 35px;" src="~assets/car/car_sele.png">
                        <img v-show="seleId==index" slot="after-title" style="width: 35px;" src="~assets/car/car-seleget.png">
                        <div slot="default" :style="getItemStyle(index)" style="text-align: left;" class="car-style">&nbsp&nbsp&nbsp&nbsp{{car.showName}}<br>&nbsp&nbsp&nbsp&nbsp新车购置价: ¥{{car.price}}</div>
                    </cell>
                    <template v-if="car.isShowCarDetai">
                        <div class="car-cell">
                            <cell>
                                <div slot="after-title" class="car-info-test">出厂公司&nbsp:&nbsp</div>
                                <div slot="default" class="car-info-test">{{car.factory}}</div>
                            </cell>

                            <cell>
                                <div slot="default" class="car-info-test">核定座位&nbsp:&nbsp{{car.seatCount}}</div>
                                <div slot="after-title" class="car-info-test">核定排量(L/KW)&nbsp:&nbsp{{car.exHaustScale}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-test">车系&nbsp:&nbsp{{car.carSeriesName}}</div>
                                <div slot="default" class="car-info-test">核定吨位&nbsp:&nbsp{{car.tonCount}}</div>
                            </cell>
                            <cell>
                                <div slot="after-title" class="car-info-test">新车购置价&nbsp:&nbsp¥{{car.price}}</div>
                                <div slot="default" v-show="car.carYear!=''" class="car-info-test">出厂年份&nbsp:&nbsp{{car.carYear}}</div>
                            </cell>
                        </div>
                    </template>
                </div>
            </group>
        </div>
        <div style="height: 60px;"></div>
        <div v-show="car.carCurShowList.length!=0" class="car_footer">
            <div class="car_leftbtn">
                <div class="details-alert">
                    <img slot="icon" style="width: 15px;" src="~assets/x3/ico/smal-1.png">&nbsp提示:&nbsp点击查看车辆详细信息
                </div>
                <!-- <span>999</span> -->
            </div>
            <div @click="goAddCarInfo()" :style="queryStyle" class="car_rightbtn">下一步</div>
        </div>
    </div>
</template>

<script>
import carHeader from "src/components/car/carHeader";
import { RequestUrl } from "src/common/url";
// import Config from "src/common/config/insureConfig";
import CarConfig from "src/common/config/carConfig";
import {
    Car_Mutations,
    RouteUrl
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    Actionsheet,
    TransferDom,
    Toast,
    CheckIcon
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        Actionsheet,
        TransferDom,
        Toast,
        CheckIcon,
        carHeader
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        carAddr: "carAddr",
        shareData: "shareData",
        initIndexData: "initIndexData",
        car: "car",
        queryStyle: "queryStyle",
        baseIsQuery: "baseIsQuery"
    }),
    data() {
        return {
            isShowCarDetai: [],
            tprptCarOwnerDto: {
                name: ""
            },
            seleId: 0,
            text: "下一步",
            showCarName: "",
            tprpTitemCarDto: {},
            showCarInfo: [],
        };
    },
    watch: {
        baseIsQuery(cur, old) {
            if (cur) {
                this.text = "下一步";
            } else {
                this.text = "正在查询车辆信息...";
            }
        },
        seleId(cur, old) {
            this.showCarName = this.car.carCurShowList[this.seleId].modelName;
        }
    },
    filters: {
    },
    methods: {
        getItemStyle(index) {
            if (index == this.seleId) {
                return "color: #fff;";
            } else {
                return "color: #000;";
            }
        },
        getCarStyle(index) {
            // console.log(index + "   " + this.seleId);
            if (index == this.seleId) {
                return "background: #d67276;"
            } else {
                return "background: #fff;";
            }
        },
        showErrorMsg(errorMsg) {
            this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
            // setTimeout(() => {
            //   this.$vux.alert.hide();
            // }, 3000);
            return false;
        },
        setSelect(index) {
            // debugger
            // debugger
            // alert(1);
            // debugger
            // this.isShowCarDetai[index] = !this.isShowCarDetai[index];
            // console.log(index);
            // console.log(this.isShowCarDetai[index]);
            this.showCarInfo[index].isShowCarDetai = !this.showCarInfo[index].isShowCarDetai;
            this.seleId = index;
            // console.log(this.seleId);
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.CAR_INFO);
        },
        setQueryInfo() {

        },
        setData() {
            if (sessionStorage["CAR_FORM_URL"] != "/") {
                if (typeof (this.car.carSelectSave[this.car.queryModelName]) == "undefined") {
                    this.seleId = 0;
                } else {
                    this.seleId = this.car.carSelectSave[this.car.queryModelName];
                }
                this.tprpTitemCarDto = this.car.carInfoList[this.car.licenseNo].tprpTitemCarDto;
                this.tprptCarOwnerDto = this.car.carInfoList[this.car.licenseNo].tprptCarOwnerDto;
                this.getCarSele("init", this.tprpTitemCarDto.vehicleModel);
            }
        },
        saveData() {
            // debugger
            // debugger
            // let seleId = this.seleId;
            // let test = 0;
            if (sessionStorage["CAR_FORM_URL"] != "/" && this.showCarInfo.length != 0) {
                if (this.car.carCurShowList.length != 0) {
                    let query = {
                        seleId: this.seleId,
                        _this: this
                    }
                    this.$common.storeCommit(this, Car_Mutations.CAR_SELECT_SAVE, query);
                }
            }
        },
        getCarSele(type, vehicleModel) {
            let data = {
                type: type,
                _this: this,
                vinNo: this.tprpTitemCarDto.vinNo,
                modelName: vehicleModel
            }
            this.$common.storeCommit(this, Car_Mutations.GET_SALE_QUERY_VIN_NO, data);
        },
        goAddCarInfo() {
            if (this.baseIsQuery) {
                // this.getCarSele("des", this.showCarName);
                this.$common.goUrl(this, RouteUrl.ADD_CAR_INFO);
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["CAR_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        this.setData();
    },
    beforeDestroy() {
        this.saveData();
    },
    mounted() {
        let _this = this;
        document.title = '车型选择';
        if (sessionStorage["CAR_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.CAR_INSURE);
            return;
        }
        this.$init.subPageInit(this);
        // debugger
        // if (!this.car.isSetSele) {
        // this.$common.storeCommit(this, Car_Mutations.IS_SET_SELE, true);
        $(window).scroll(function () {
            if (_this.$route.path == RouteUrl.CAR_SELECT && sessionStorage["IS_SET_CAR_SELECT_SCROLL"] != "T") {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                // console.log(scrollTop);
                // console.log(windowHeight);
                // console.log(scrollHeight);
                if (scrollHeight - (scrollTop + windowHeight) < 80) {
                    if (_this.baseIsQuery) {
                        sessionStorage["IS_SET_CAR_SELECT_SCROLL"] = "T";
                        _this.getCarSele('query', _this.tprpTitemCarDto.vehicleModel);
                    }
                }
            }
        });
        // }
        // if (!this.car.isQueryCar) {
        // this.setQueryInfo();
        // }
        //初始化，没有footer
        // this.carKindList = CarConfig.getCarKind();
        // window.addEventListener('load', function() {
        //     _this.saveData();
        // });
        // window.addEventListener('popstate', function(ev) {
        //     _this.saveData();
        // });
        // this.hourseType = Config.getHouseType();
        //添加上一个页面的价钱

    }
}
</script>

<style lang="scss">
.car-style {
  color: #000;
  font-size: 15px;
}
</style>
